import React, { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  message,
  Tag,
  Row,
  Col,
  Statistic,
  DatePicker,
  Form,
  Input,
  Modal,
  Descriptions,
} from 'antd';
import {
  ReloadOutlined,
  SearchOutlined,
  EyeOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

/**
 * 卡BIN接口定义
 * BIN（Bank Identification Number）是银行卡的前6位数字，用于标识发卡行和卡类型
 */
interface CardBin {
  id: number;             // 唯一标识符
  binNumber: string;      // BIN号（前6位数字）
  cardScheme: string;     // 卡组织（visa/mastercard/unionpay）
  cardType: string;       // 卡类型（credit/debit/prepaid）
  currency: string;       // 货币类型
  status: string;         // 状态（active/inactive）
  issueBank: string;      // 发卡行
  createdAt: string;      // 创建时间
  updatedAt: string;      // 更新时间
  description: string;    // 描述信息
}

/**
 * 卡BIN管理组件
 * 用于展示和管理银行卡BIN信息，包括查询、添加、编辑、删除等功能
 */
const CardBin: React.FC = () => {
  // 状态管理
  const [loading, setLoading] = useState(false); // 加载状态
  const [modalVisible, setModalVisible] = useState(false); // 详情模态框显示状态
  const [selectedBin, setSelectedBin] = useState<CardBin | null>(null); // 选中的BIN记录
  const [bins, setBins] = useState<CardBin[]>([]); // BIN列表数据
  const [queryParams, setQueryParams] = useState({
    dateRange: null as [dayjs.Dayjs | null, dayjs.Dayjs | null] | null, // 时间范围查询条件
    binNumber: '', // BIN号查询条件
    cardScheme: '', // 卡组织查询条件
    status: '' // 状态查询条件
  });

  /**
   * 模拟卡BIN数据
   * 在实际项目中，这些数据应该从API获取
   */
  const mockBins: CardBin[] = [
    {
      id: 1,
      binNumber: '123456',
      cardScheme: 'visa',
      cardType: 'credit',
      currency: 'USD',
      status: 'active',
      issueBank: '中国银行',
      createdAt: '2024-01-20T10:30:00Z',
      updatedAt: '2024-01-20T10:30:00Z',
      description: '普通信用卡BIN'
    },
    {
      id: 2,
      binNumber: '234567',
      cardScheme: 'mastercard',
      cardType: 'debit',
      currency: 'USD',
      status: 'active',
      issueBank: '工商银行',
      createdAt: '2024-01-19T14:20:00Z',
      updatedAt: '2024-01-19T14:20:00Z',
      description: '借记卡BIN'
    },
    {
      id: 3,
      binNumber: '345678',
      cardScheme: 'visa',
      cardType: 'prepaid',
      currency: 'EUR',
      status: 'inactive',
      issueBank: '建设银行',
      createdAt: '2024-01-18T09:15:00Z',
      updatedAt: '2024-01-18T09:15:00Z',
      description: '预付卡BIN'
    },
    {
      id: 4,
      binNumber: '456789',
      cardScheme: 'mastercard',
      cardType: 'credit',
      currency: 'USD',
      status: 'active',
      issueBank: '农业银行',
      createdAt: '2024-01-17T16:45:00Z',
      updatedAt: '2024-01-17T16:45:00Z',
      description: '商务信用卡BIN'
    }
  ];

  /**
   * 获取卡BIN列表
   * 模拟API调用，实际项目中应替换为真实的API请求
   */
  const fetchCardBins = async () => {
    setLoading(true); // 开始加载
    try {
      // 模拟API调用延迟
      setTimeout(() => {
        setBins(mockBins); // 设置BIN数据
        setLoading(false); // 结束加载
      }, 500);
    } catch (error) {
      console.error('获取卡BIN失败:', error);
      message.error('获取卡BIN失败');
      setLoading(false);
    }
  };

  /**
   * 显示BIN详情
   * @param bin 选中的BIN记录
   */
  const showDetail = (bin: CardBin) => {
    setSelectedBin(bin); // 设置选中的BIN
    setModalVisible(true); // 显示详情模态框
  };

  /**
   * 处理编辑操作
   * @param bin 要编辑的BIN记录
   */
  const handleEdit = (bin: CardBin) => {
    // 模拟编辑操作，实际项目中应打开编辑模态框
    message.info(`编辑卡BIN ${bin.binNumber}`);
  };

  /**
   * 处理删除操作
   * @param bin 要删除的BIN记录
   */
  const handleDelete = (bin: CardBin) => {
    // 模拟删除操作，实际项目中应调用API
    message.warning(`删除卡BIN ${bin.binNumber}`);
  };

  /**
   * 处理添加操作
   */
  const handleAdd = () => {
    // 模拟添加操作，实际项目中应打开添加模态框
    message.info('添加新卡BIN');
  };

  // useEffect钩子：组件挂载时获取BIN列表
  useEffect(() => {
    fetchCardBins();
  }, []);

  /**
   * 表格列配置
   * 定义表格的列及其渲染方式
   */
  const columns = [
    {
      title: 'BIN号',
      dataIndex: 'binNumber',
      key: 'binNumber',
      render: (binNumber: string) => (
        <span style={{ fontWeight: 'bold', fontFamily: 'monospace' }}>
          {binNumber}
        </span>
      )
    },
    {
      title: '卡组织',
      dataIndex: 'cardScheme',
      key: 'cardScheme',
      render: (scheme: string) => {
        // 卡组织配置映射
        const schemeConfig: { [key: string]: { color: string; text: string } } = {
          visa: { color: 'blue', text: 'Visa' },
          mastercard: { color: 'red', text: 'MasterCard' },
          unionpay: { color: 'green', text: '银联' }
        };
        const config = schemeConfig[scheme] || { color: 'default', text: scheme };
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '卡类型',
      dataIndex: 'cardType',
      key: 'cardType',
      render: (type: string) => {
        // 卡类型配置映射
        const typeConfig: { [key: string]: { color: string; text: string } } = {
          credit: { color: 'purple', text: '信用卡' },
          debit: { color: 'cyan', text: '借记卡' },
          prepaid: { color: 'orange', text: '预付卡' }
        };
        const config = typeConfig[type] || { color: 'default', text: type };
        return <Tag color={config.color}>{config.text}</Tag>;
      }
    },
    {
      title: '货币',
      dataIndex: 'currency',
      key: 'currency',
      render: (currency: string) => (
        <Tag color="geekblue">{currency}</Tag> // 使用geekblue颜色显示货币
      )
    },
    {
      title: '发卡行',
      dataIndex: 'issueBank',
      key: 'issueBank'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '激活' : '停用'}
        </Tag>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: (text: string) => new Date(text).toLocaleDateString() // 格式化日期显示
    },
    {
      title: '操作',
      key: 'action',
      render: (_: unknown, record: CardBin) => (
        <Space>
          {/* 详情按钮 */}
          <Button
            type="link"
            size="small"
            icon={<EyeOutlined />}
            onClick={() => showDetail(record)}
          >
            详情
          </Button>
          {/* 编辑按钮 */}
          <Button
            type="link"
            size="small"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          {/* 删除按钮 */}
          <Button
            type="link"
            size="small"
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record)}
            danger // 危险操作样式
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  // 统计信息：计算激活和停用的BIN数量
  const activeCount = bins.filter(bin => bin.status === 'active').length;
  const inactiveCount = bins.filter(bin => bin.status === 'inactive').length;

  return (
    <div className="p-6">
      <Card>
        {/* 统计信息卡片 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总BIN数量"
                value={bins.length}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="激活BIN"
                value={activeCount}
                valueStyle={{ color: '#52c41a' }} // 绿色显示
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="停用BIN"
                value={inactiveCount}
                valueStyle={{ color: '#ff4d4f' }} // 红色显示
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="Visa BIN"
                value={bins.filter(bin => bin.cardScheme === 'visa').length}
                valueStyle={{ color: '#1890ff' }} // 蓝色显示
              />
            </Card>
          </Col>
        </Row>

        {/* 操作按钮区域 */}
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
            添加BIN
          </Button>
          
          <Space>
            <Button icon={<ReloadOutlined />} onClick={fetchCardBins}>
              刷新
            </Button>
          </Space>
        </div>

        {/* 查询表单 */}
        <Card style={{ marginBottom: 16 }}>
          <Form layout="inline">
            <Form.Item label="时间范围">
              <RangePicker
                value={queryParams.dateRange}
                onChange={(dates) => setQueryParams(prev => ({ ...prev, dateRange: dates }))}
              />
            </Form.Item>
            <Form.Item label="BIN号">
              <Input
                placeholder="请输入BIN号"
                value={queryParams.binNumber}
                onChange={(e) => setQueryParams(prev => ({ ...prev, binNumber: e.target.value }))}
                style={{ width: 120 }}
              />
            </Form.Item>
            <Form.Item label="卡组织">
              <Input
                placeholder="卡组织"
                value={queryParams.cardScheme}
                onChange={(e) => setQueryParams(prev => ({ ...prev, cardScheme: e.target.value }))}
                style={{ width: 100 }}
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary" icon={<SearchOutlined />}>
                查询
              </Button>
            </Form.Item>
          </Form>
        </Card>

        {/* 卡BIN表格 */}
        <Table
          loading={loading} // 加载状态
          columns={columns} // 列配置
          dataSource={bins} // 数据源
          rowKey="id" // 行键
          pagination={{
            pageSize: 10, // 每页显示10条
            showSizeChanger: true, // 显示每页条数切换器
            showQuickJumper: true, // 显示快速跳转
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条` // 显示总数
          }}
        />

        {/* 详情模态框 */}
        <Modal
          title="卡BIN详情"
          open={modalVisible} // 显示状态
          onCancel={() => setModalVisible(false)} // 取消关闭
          footer={[
            <Button key="close" onClick={() => setModalVisible(false)}>
              关闭
            </Button>
          ]}
          width={600} // 模态框宽度
        >
          {selectedBin && (
            <Descriptions bordered column={1}>
              <Descriptions.Item label="BIN号">
                <span style={{ fontWeight: 'bold', fontSize: '16px', fontFamily: 'monospace' }}>
                  {selectedBin.binNumber}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="卡组织">
                <Tag color={selectedBin.cardScheme === 'visa' ? 'blue' : 'red'}>
                  {selectedBin.cardScheme.toUpperCase()}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="卡类型">
                <Tag color={
                  selectedBin.cardType === 'credit' ? 'purple' :
                  selectedBin.cardType === 'debit' ? 'cyan' : 'orange'
                }>
                  {selectedBin.cardType === 'credit' ? '信用卡' :
                   selectedBin.cardType === 'debit' ? '借记卡' : '预付卡'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="货币">
                <Tag color="geekblue">{selectedBin.currency}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="发卡行">{selectedBin.issueBank}</Descriptions.Item>
              <Descriptions.Item label="状态">
                <Tag color={selectedBin.status === 'active' ? 'green' : 'red'}>
                  {selectedBin.status === 'active' ? '激活' : '停用'}
                </Tag>
              </Descriptions.Item>
              <Descriptions.Item label="描述">{selectedBin.description}</Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {new Date(selectedBin.createdAt).toLocaleString()}
              </Descriptions.Item>
              <Descriptions.Item label="更新时间">
                {new Date(selectedBin.updatedAt).toLocaleString()}
              </Descriptions.Item>
            </Descriptions>
          )}
        </Modal>
      </Card>
    </div>
  );
};

export default CardBin;